<template>
  <div class="bed-manage-handle">
    <div v-if="wardData" class="bed-management">
      <div class="ward-info">
        <h3>{{ wardData.name }} ({{ wardData.wardNo }})</h3>
        <p>科室：{{ wardData.departmentName }} | 楼层：{{ wardData.floor }}F</p>
      </div>
      
      <el-form :model="bedForm" label-width="120px">
        <el-form-item label="总床位数：">
          <el-input-number
            v-model="bedForm.totalBeds"
            :min="1"
            :max="20"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="已占用床位数：">
          <el-input-number
            v-model="bedForm.occupiedBeds"
            :min="0"
            :max="bedForm.totalBeds"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="床位使用率：">
          <span class="occupancy-rate">
            {{ getBedOccupancyRate() }}%
          </span>
          <el-progress
            :percentage="getBedOccupancyRate()"
            :status="getBedProgressStatus()"
            style="margin-top: 8px; width: 300px"
          />
        </el-form-item>
      </el-form>
    </div>
    
    <div class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">
        更新床位
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/api/request'

// 定义props
const props = defineProps({
  wardData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['close'])

// 响应式数据
const submitting = ref(false)

// 床位表单数据
const bedForm = reactive({
  totalBeds: 0,
  occupiedBeds: 0
})

// 获取床位使用率
const getBedOccupancyRate = () => {
  if (!bedForm.totalBeds || bedForm.totalBeds === 0) return 0
  return Math.round((bedForm.occupiedBeds / bedForm.totalBeds) * 100)
}

// 获取床位进度条状态
const getBedProgressStatus = () => {
  const rate = getBedOccupancyRate()
  if (rate >= 90) return 'exception'
  if (rate >= 80) return 'warning'
  return 'success'
}

// 初始化数据
const initData = () => {
  if (props.wardData) {
    Object.assign(bedForm, {
      totalBeds: props.wardData.totalBeds,
      occupiedBeds: props.wardData.occupiedBeds
    })
  }
}

// 处理取消
const handleCancel = () => {
  emit('close')
}

// 处理提交
const handleSubmit = async () => {
  try {
    submitting.value = true
    
    const response = await request.put('/admin/ward', {
      ...props.wardData,
      totalBeds: bedForm.totalBeds,
      occupiedBeds: bedForm.occupiedBeds
    })
    
    if (response.code === 200) {
      ElMessage.success('床位更新成功')
      emit('close', 'success')
    } else {
      ElMessage.error(response.message || '床位更新失败')
    }
  } catch (error) {
    console.error('床位更新失败:', error)
    ElMessage.error('床位更新失败')
  } finally {
    submitting.value = false
  }
}

// 组件挂载时初始化数据
onMounted(() => {
  initData()
})
</script>

<style scoped>
.bed-manage-handle {
  padding: 20px 0;
}

.bed-management {
  padding: 20px 0;
}

.ward-info h3 {
  margin: 0 0 8px 0;
  color: #303133;
}

.ward-info p {
  margin: 0 0 20px 0;
  color: #606266;
}

.occupancy-rate {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

.dialog-footer {
  margin-top: 20px;
  text-align: right;
}
</style> 